{% extends "base.html" %}

{% block title %} Partida {{ game.id }} {% endblock %}

{% block extra_js %}
<script src="{{ STATIC_URL }}js/jquery/jquery-latest.min.js"></script>
<script src="{{ STATIC_URL }}js/jquery/jquery.tmpl.min.js"></script>
<script src="{{ STATIC_URL|default:MEDIA_URL }}js/socket.io.js"></script>
<script>WEB_SOCKET_SWF_LOCATION="{{ STATIC_URL }}flashsocket/WebSocketMain.swf"; window.room = "{{ room.id }}"; window.game="{{ game.id }}"</script>


<script src="{{ STATIC_URL }}js/knockout-3.0.0.js"></script>
<script src="{{ STATIC_URL }}countdown/jquery.countdown.js"></script>
<!--<script src="{{ STATIC_URL }}js/datas.js"></script>-->
<script src="{{ STATIC_URL }}js/model.js"></script>
<script src="{{ STATIC_URL }}js/model_view.js"></script>
<script src="{{ STATIC_URL }}js/sockets.js"></script>
<script src="{{ STATIC_URL }}js/utils.js"></script>

{% endblock %}

{% block main %}

<div id="container_game" class="container" style="display:none;">
    <div class="row">
        <div style="margin-top:20px"></div>
        <div class="col-xs-3">
            <div class="row submenu">
                <label>tiempo: </label><div id="count-time-up"></div>
                <label>latencia: </label><div id="player_delay"></div>
            </div> <!-- END COUNT TIME UP -->

            <div style="margin-top:20px"></div>

            <div class="row">
                <select id="base-selector" data-bind="options: $root.bases, optionsValue: 'base_id', optionsText: 'base_name'" class="form-control input-lg" style="cursor: pointer;"></select>
            </div> <!-- END BASE SELECTOR -->

            <div style="margin-top: 20px"></div>

            <div class="row submenu" style="height:270px;">
                <div data-bind="foreach: bases" style="margin: 10px;">

                    <div data-bind="visible: base_id == $root.base_selected, attr:{id: base_id_sel}" class="select_bases">
                        
                        <div class="row">
                            <div> <label>Recursos:</label> </div>
                            <div>
                                <i class='flaticon-thigh' style='padding-right:10px'></i><span data-bind="text: resources"></span>
                            </div>
                        </div>

                        <div style="margin-top: 10px;"></div>
                        <div class="row"> <label>Hormigas:</label> </div>
                        <div style="margin-top: 10px;"></div>

                        <div class="row">
                            <div class="col-xs-1">
                                <div></div>
                                <div></div>
                                <div data-bind="foreach: icons_ants">
                                    <div>
                                        <img data-bind="attr:{src: $data}"/>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-2">
                                <div data-bind="foreach: num_ants">
                                    <div data-bind="text: $data">
                                    </div>
                                </div>
                            </div>

                            <div class="col-xs-8">
                                <div data-bind="foreach: type_ants">
                                    <div>
                                        <span data-bind="text: $data">
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div> <!-- END BASE INFO  -->

            <div style="margin-top:30px"></div>
            
            <div class="row submenu">
                <div class="row"> <label>Construcción de Hormigas:</label> </div>

                <div style="margin-top: 20px;"></div>

                <div class="row">
                    <div class="col-xs-6 without-padding">
                        <form class="form-new-ants">
                            <input type="hidden" name="type_ant" value="W" />
                            <div class="left-inner-addon input-group">
                                <img src="{{ STATIC_URL }}img/icons_ants/Ant-16-W.png" />
                                <input type="number" name="number_ants" class="form-control input_num_ants" placeholder="0" />
                                <span class="input-group-btn">
                                    <button title="<img src='{{ STATIC_URL }}img/icons_ants/Ant-16-W.png' /> {{ NAME_ANTS.0 }}" class="btn btn-default btn-new-ants" type="submit" data-container="body" data-toggle="popover" data-placement="top" data-content="
                                    <div class='col-xs-6'>
                                        <div><i class='flaticon-cross9' style='padding-right:10px'></i>{{ ATTACK_POWER.0 }}</div> 
                                        <div><i class='flaticon-shopper' style='padding-right:16px'></i>{{ TRANSPORT_CAPACITY.0 }}</div>
                                        <div><i class='flaticon-distance1' style='padding-right:10px'></i>{{ SPEED.0 }}</div>
                                    </div>
                                    <div class='col-xs-6'>
                                        <div><i class='flaticon-shield77' style='padding-right:10px'></i>{{ DEFENSE_POWER.0 }}</div> 
                                        <div><i class='flaticon-thief' style='padding-right:10px'></i>{{ RESOURCES_COLLECTED.0 }}</div>
                                        <div><i class='flaticon-thigh' style='padding-right:10px'></i>{{ COST_RESOURCES.0 }}</div>
                                    </div>
                                    <div class='text_info'>Son las hormigas que se encargan de recolectar recursos para el hormiguero donde habiten.</div>" data-trigger="hover" data-html="true">OK</button>
                                </span>
                            </div>
                        </form>
                    </div>

                    <div class="col-xs-6 without-padding">
                        <form class="form-new-ants">
                            <input type="hidden" name="type_ant" value="OO" />
                            <div class="left-inner-addon input-group">
                                <img src="{{ STATIC_URL }}img/icons_ants/Ant-16-OO.png" />
                                <input type="number" name="number_ants" class="form-control input_num_ants" placeholder="0" />
                                <span class="input-group-btn">
                                    <button title="<img src='{{ STATIC_URL }}img/icons_ants/Ant-16-OO.png' /> {{ NAME_ANTS.1 }}" class="btn btn-default btn-new-ants" type="submit" data-container="body" data-toggle="popover" data-placement="top" data-content="
                                    <div class='col-xs-6'>
                                        <div><i class='flaticon-cross9' style='padding-right:10px'></i>{{ ATTACK_POWER.1 }}</div> 
                                        <div><i class='flaticon-shopper' style='padding-right:16px'></i>{{ TRANSPORT_CAPACITY.1 }}</div>
                                        <div><i class='flaticon-distance1' style='padding-right:10px'></i>{{ SPEED.1 }}</div>
                                    </div>
                                    <div class='col-xs-6'>
                                        <div><i class='flaticon-shield77' style='padding-right:10px'></i>{{ DEFENSE_POWER.1 }}</div> 
                                        <div><i class='flaticon-thief' style='padding-right:10px'></i>{{ RESOURCES_COLLECTED.1 }}</div>
                                        <div><i class='flaticon-thigh' style='padding-right:10px'></i>{{ COST_RESOURCES.1 }}</div>
                                    </div>
                                    <div class='text_info'>Es la mejor hormiga para atacar un hormiguero rival.</div>" data-trigger="hover" data-html="true">OK</button>
                                </span>
                            </div>
                        </form>
                    </div>
                </div>

                <div style="margin-top: 10px;"></div>
                <div class="row">
                    <div class="col-xs-6 without-padding">
                        <form class="form-new-ants">
                            <input type="hidden" name="type_ant" value="OD" />
                            <div class="left-inner-addon input-group">
                                <img src="{{ STATIC_URL }}img/icons_ants/Ant-16-OD.png" />
                                <input type="number" name="number_ants" class="form-control input_num_ants" placeholder="0" />
                                <span class="input-group-btn">
                                    <button title="<img src='{{ STATIC_URL }}img/icons_ants/Ant-16-OD.png' /> {{ NAME_ANTS.2 }}" class="btn btn-default btn-new-ants" type="submit" data-container="body" data-toggle="popover" data-placement="top" data-content="
                                    <div class='col-xs-6'>
                                        <div><i class='flaticon-cross9' style='padding-right:10px'></i>{{ ATTACK_POWER.2 }}</div> 
                                        <div><i class='flaticon-shopper' style='padding-right:16px'></i>{{ TRANSPORT_CAPACITY.2 }}</div>
                                        <div><i class='flaticon-distance1' style='padding-right:10px'></i>{{ SPEED.2 }}</div>
                                    </div>
                                    <div class='col-xs-6'>
                                        <div><i class='flaticon-shield77' style='padding-right:10px'></i>{{ DEFENSE_POWER.2 }}</div> 
                                        <div><i class='flaticon-thief' style='padding-right:10px'></i>{{ RESOURCES_COLLECTED.2 }}</div>
                                        <div><i class='flaticon-thigh' style='padding-right:10px'></i>{{ COST_RESOURCES.2 }}</div>
                                    </div>
                                    <div class='text_info'>Especialista en la defensa estática de un hormiguero.</div>" data-trigger="hover" data-html="true">OK</button>
                                </span>
                            </div>
                        </form>
                    </div>

                    <div class="col-xs-6 without-padding">
                        <form class="form-new-ants">
                            <input type="hidden" name="type_ant" value="FO" />
                            <div class="left-inner-addon input-group">
                                <img src="{{ STATIC_URL }}img/icons_ants/Ant-16-FO.png" />
                                <input type="number" name="number_ants" class="form-control input_num_ants" placeholder="0" />
                                <span class="input-group-btn">
                                    <button title="<img src='{{ STATIC_URL }}img/icons_ants/Ant-16-FO.png' /> {{ NAME_ANTS.3 }}" class="btn btn-default btn-new-ants" type="submit" data-container="body" data-toggle="popover" data-placement="top" data-content="
                                    <div class='col-xs-6'>
                                        <div><i class='flaticon-cross9' style='padding-right:10px'></i>{{ ATTACK_POWER.3 }}</div> 
                                        <div><i class='flaticon-shopper' style='padding-right:16px'></i>{{ TRANSPORT_CAPACITY.3 }}</div>
                                        <div><i class='flaticon-distance1' style='padding-right:10px'></i>{{ SPEED.3 }}</div>
                                    </div>
                                    <div class='col-xs-6'>
                                        <div><i class='flaticon-shield77' style='padding-right:10px'></i>{{ DEFENSE_POWER.3 }}</div> 
                                        <div><i class='flaticon-thief' style='padding-right:10px'></i>{{ RESOURCES_COLLECTED.3 }}</div>
                                        <div><i class='flaticon-thigh' style='padding-right:10px'></i>{{ COST_RESOURCES.3 }}</div>
                                    </div>
                                    <div class='text_info'>Es la hormiga más rápida y fuerte en el ataque a un hormiguero.</div>" data-trigger="hover" data-html="true">OK</button>
                                </span>
                            </div>
                        </form>
                    </div>
                </div>
                
                <div style="margin-top: 10px;"></div>
                
                <div class="row">
                    <div class="col-xs-6 without-padding">
                        <form class="form-new-ants">
                            <input type="hidden" name="type_ant" value="FD" />
                            <div class="left-inner-addon input-group">
                                <img src="{{ STATIC_URL }}img/icons_ants/Ant-16-FD.png" />
                                <input type="number" name="number_ants" class="form-control input_num_ants" placeholder="0" />
                                <span class="input-group-btn">
                                    <button title="<img src='{{ STATIC_URL }}img/icons_ants/Ant-16-FD.png' /> {{ NAME_ANTS.4 }}" class="btn btn-default btn-new-ants" type="submit" data-container="body" data-toggle="popover" data-placement="top" data-content="
                                    <div class='col-xs-6'>
                                        <div><i class='flaticon-cross9' style='padding-right:10px'></i>{{ ATTACK_POWER.4 }}</div> 
                                        <div><i class='flaticon-shopper' style='padding-right:16px'></i>{{ TRANSPORT_CAPACITY.4 }}</div>
                                        <div><i class='flaticon-distance1' style='padding-right:10px'></i>{{ SPEED.4 }}</div>
                                    </div>
                                    <div class='col-xs-6'>
                                        <div><i class='flaticon-shield77' style='padding-right:10px'></i>{{ DEFENSE_POWER.4 }}</div> 
                                        <div><i class='flaticon-thief' style='padding-right:10px'></i>{{ RESOURCES_COLLECTED.4 }}</div>
                                        <div><i class='flaticon-thigh' style='padding-right:10px'></i>{{ COST_RESOURCES.4 }}</div>
                                    </div>
                                    <div class='text_info'> Es la hormiga más rápida y fuerte en la defensa de un hormiguero.</div>" data-trigger="hover" data-html="true">OK</button>
                                </span>
                            </div>
                        </form>
                    </div>

                    <div class="col-xs-6 without-padding">
                        <form class="form-new-ants">
                            <input type="hidden" name="type_ant" value="Q" />
                            <div class="left-inner-addon input-group">
                                <img src="{{ STATIC_URL }}img/icons_ants/Ant-16-Q.png" />
                                <input type="number" name="number_ants" class="form-control input_num_ants" placeholder="0" />
                                <span class="input-group-btn">
                                    <button title="<img src='{{ STATIC_URL }}img/icons_ants/Ant-16-Q.png' /> {{ NAME_ANTS.5 }}" class="btn btn-default btn-new-ants" type="submit" data-container="body" data-toggle="popover" data-placement="top" data-content="
                                    <div class='col-xs-6'>
                                        <div><i class='flaticon-cross9' style='padding-right:10px'></i>{{ ATTACK_POWER.5 }}</div> 
                                        <div><i class='flaticon-shopper' style='padding-right:16px'></i>{{ TRANSPORT_CAPACITY.5 }}</div>
                                        <div><i class='flaticon-distance1' style='padding-right:10px'></i>{{ SPEED.5 }}</div>
                                    </div>
                                    <div class='col-xs-6'>
                                        <div><i class='flaticon-shield77' style='padding-right:10px'></i>{{ DEFENSE_POWER.5 }}</div> 
                                        <div><i class='flaticon-thief' style='padding-right:10px'></i>{{ RESOURCES_COLLECTED.5 }}</div>
                                        <div><i class='flaticon-thigh' style='padding-right:10px'></i>{{ COST_RESOURCES.5 }}</div>
                                    </div>
                                    <div class='text_info'> Es capaz de colonizar nuevos hormigueros.</div>" data-trigger="hover" data-html="true">OK</button>
                                </span>
                            </div>
                        </form>
                    </div>

                </div>
            </div> <!-- END NEW ANTS  -->

        </div>

        <div class="col-xs-1"></div>
        <div class="col-xs-8">
            <div class="row" style="">
                <ul class="nav nav-tabs nav-justified tab-color-blue" id="actions-tab">
                    <li class="active"><a href="#map">Mapa</a></li>
                    <li style="display:none;"><a href="#statistics">Estadísticas</a></li>
                    <li id="li_events"><a href="#attacks"> <span id="badge_events_node" class="badge badge-error pull-right"> 0 </span> Eventos </a></li>
                    <li id="li_reports"><a href="#reports"> <span id="badge_reports_node" class="badge badge-success pull-right"> 0 </span> Reportes </a></li>
                    <li id="li_chat"><a href="#tab_chat"> <span id="badge_chats_node" class="badge badge-warning pull-right"> 0 </span> Chat </a></li>
                </ul>
                <div class="tab-content submenu" style="min-height: 450px;">
                    <div class="tab-pane active" id="map">
                        <div class="row">
                            <div class="col-xs-6">
                                <div id="melonjsMap"></div>
                            </div>

                            <div class="col-xs-6">
                                <div data-bind="foreach: bases_map">
                                    <div style="display:none" data-bind="attr:{id: base_id_map}" class="action-tiles">
                                        <div style="margin-top: 20px;"></div>

                                        <div style="margin-left: 10px;" data-bind="if:player_name != null">
                                            <h3 data-bind="text:player_name"></h3>
                                            <blockquote style="color: #999;">
                                                <div class="row">
                                                    <div class="col-xs-6">
                                                        Rol
                                                    </div>
                                                    <div class="col-xs-6" data-bind="text: player_role"></div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-xs-6">
                                                        Puntos
                                                    </div>
                                                    <div class="col-xs-6" data-bind="text:player_points_growth"></div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-xs-6">
                                                        Muertes
                                                    </div>
                                                    <div class="col-xs-6" data-bind="text:player_points_kill"></div>
                                                </div>
                                            </blockquote>
                                        </div>

                                        <div style="margin-left: 10px;">
                                            
                                            <h3 class="col-xs-6"> Hormiguero:</h3>
                                            <h3 class="col-xs-6" data-bind="text:base_name"></h3>

                                            <blockquote style="color: #999;">
                                                <div class="row">
                                                    <div class="col-xs-6">
                                                        Nivel
                                                    </div>
                                                    <div class="col-xs-6" data-bind="text: level"></div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-xs-6">
                                                        Recursos Disponibles
                                                    </div>
                                                    <div class="col-xs-6" data-bind="text:resources_limit"></div>
                                                </div>
                                                <div class="row" data-bind="if:bonus != null">
                                                    <div class="col-xs-6">
                                                        Bonus
                                                    </div>
                                                    <div class="col-xs-6" data-bind="text:bonus"></div>
                                                </div>
                                            </blockquote>
                                        </div>
                                        porcentaje de recursos gastados...
                                        <div class="progress progress-striped active">
                                            <div class="progress-bar"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
                                                <span class="sr-only">45% Complete</span>
                                            </div>
                                        </div>


                                    </div>
                                </div>
                            </div>
                        </div>

                        <div style="margin-top: 10px;"></div>
                        <div class="row" data-bind="foreach: bases_map">
                            <div style="display:none" data-bind="attr:{id: base_id_map_action}" class="action-tiles">

                                <div class="col-xs-4">
                                    <div> <label> Enviar Recursos: </label> </div>
                                    <form class="send-resources" data-bind="attr:{'data-iden': base_id_map}" >
                                        <div class="input-group">
                                            <div class="left-inner-addon">
                                                <i class="flaticon-thigh flatiicon-input"></i>
                                                <input type="number" value="0" placeholder="0" class="input-resources form-control">
                                            </div>
                                            <span class="input-group-btn">
                                                <button class="btn btn-default" type="submit"> Enviar </button>
                                            </span>
                                        </div>
                                        <div class="div-movement-resource-time text_info" style="display:none;"></div>
                                    </form>
                                </div>
                                <div class="col-xs-4">
                                    <div> <label> Atacar: </label> </div>
                                    <form class="send-attack" data-bind="attr:{'data-iden': base_id_map}" >
                                        <div class="input-group">
                                            <div class="left-inner-addon">
                                                <img src="{{ STATIC_URL }}img/icons_ants/Ant-16-W.png" />
                                                <input placeholder="0" value="0" type="number" class="ant-0 form-control ants-attack">
                                            </div>
                                            <div class="left-inner-addon">
                                                <img src="{{ STATIC_URL }}img/icons_ants/Ant-16-OO.png" />
                                                <input placeholder="0" value="0" type="number" class="ant-1 form-control ants-attack">
                                            </div>
                                            <div class="left-inner-addon">
                                                <img src="{{ STATIC_URL }}img/icons_ants/Ant-16-OD.png" />
                                                <input placeholder="0" value="0" type="number" class="ant-2 form-control ants-attack">
                                            </div>
                                            <div class="left-inner-addon">
                                                <img src="{{ STATIC_URL }}img/icons_ants/Ant-16-FO.png" />
                                                <input placeholder="0" value="0" type="number" class="ant-3 form-control ants-attack">
                                            </div>
                                            <div class="left-inner-addon">
                                                <img src="{{ STATIC_URL }}img/icons_ants/Ant-16-FD.png" />
                                                <input placeholder="0" value="0" type="number" class="ant-4 form-control ants-attack">
                                            </div>
                                            <div class="left-inner-addon">
                                                <img src="{{ STATIC_URL }}img/icons_ants/Ant-16-Q.png" />
                                                <input placeholder="0" value="0" type="number" class="ant-5 form-control ants-attack">
                                            </div>
                                            <span class="input-group-btn">
                                                <button class="btn btn-default" type="submit"> Enviar </button>
                                            </span>
                                        </div>
                                        <div class="div-ants-attack-time text_info" style="display:none;"></div>
                                    </form>
                                </div>

                                <div class="col-xs-4">
                                    <div> <label> Apoyar: </label> </div>
                                    <form class="send-uphold" data-bind="attr:{'data-iden': base_id_map}" >
                                        <div class="input-group">
                                            <div class="left-inner-addon">
                                                <img src="{{ STATIC_URL }}img/icons_ants/Ant-16-W.png" />
                                                <input placeholder="0" value="0" type="number" class="ant-0 form-control ants-uphold">
                                            </div>
                                            <div class="left-inner-addon">
                                                <img src="{{ STATIC_URL }}img/icons_ants/Ant-16-OO.png" />
                                                <input placeholder="0" value="0" type="number" class="ant-1 form-control ants-uphold">
                                            </div>
                                            <div class="left-inner-addon">
                                                <img src="{{ STATIC_URL }}img/icons_ants/Ant-16-OD.png" />
                                                <input placeholder="0" value="0" type="number" class="ant-2 form-control ants-uphold">
                                            </div>
                                            <div class="left-inner-addon">
                                                <img src="{{ STATIC_URL }}img/icons_ants/Ant-16-FO.png" />
                                                <input placeholder="0" value="0" type="number" class="ant-3 form-control ants-uphold">
                                            </div>
                                            <div class="left-inner-addon">
                                                <img src="{{ STATIC_URL }}img/icons_ants/Ant-16-FD.png" />
                                                <input placeholder="0" value="0" type="number" class="ant-4 form-control ants-uphold">
                                            </div>
                                            <div class="left-inner-addon">
                                                <img src="{{ STATIC_URL }}img/icons_ants/Ant-16-Q.png" />
                                                <input placeholder="0" value="0" type="number" class="ant-5 form-control ants-uphold">
                                            </div>
                                            <span class="input-group-btn">
                                                <button class="btn btn-default" type="submit"> Enviar </button>
                                            </span>
                                        </div>
                                        <div class="div-ants-uphold-time text_info" style="display:none;"></div>
                                    </form>
                                </div>
                                <div style="margin-top: 10px;"></div>

                                <p style="display:none;">acechos...</p>
                                <div class="col-xs-12" style="display:none;">
                                    <form class="send-acecho-en-ingles" data-bind="attr:{'data-iden': base_id_map}" >
                                        <div class="input-group">
                                            <input type="text" class="acecho-en-ingles form-control">
                                            <span class="input-group-btn">
                                                <button class="btn btn-default" type="submit"> Enviar </button>
                                            </span>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane" id="statistics">
                        <div class="row">
                            <div class="col-xs-6">
                                <div> <label> Nombre: </label> </div>
                            </div>
                            <div class="col-xs-6">
                                <div> <label> Puntos: </label> </div>
                            </div>
                        </div>
                        <div class="row">
                            <div id="statistics" data-bind="foreach: players">
                                <div class="col-xs-4">
                                    <div data-bind="text: player_name"></div>
                                </div>
                                <div class="col-xs-4">
                                    <div data-bind="text: player_role"></div>
                                </div>
                                <div class="col-xs-2">
                                    <div data-bind="text: player_points_growth"></div>
                                </div>
                                <div class="col-xs-2">
                                    <div data-bind="text: player_points_kill"></div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12">
                                <canvas id="myChart" style="width:100%" ></canvas>
                            </div>
                        </div>
                    </div>



                    <div class="tab-pane" id="tab_chat" style="">
                        <div class="row">
                            <div class="col-xs-12">
                                <table id="chat-table" class="table table-striped table-condensed" style="height:350px; border-left: 1px solid #ccc; border-right: 1px solid #ccc;">
                                    <tbody id="chat-lines" data-bind="foreach: messages" style="display:block; overflow-x:hidden; overflow-y:auto; display:block; height:350px;">
                                        <tr>
                                            <td><strong><small data-bind="text: name"></small></strong></td>
                                            <td><small data-bind="text: message"></small></td>
                                        </tr>
                                    </tbody>
                                </table>

                                <form id="send-message2">
                                    <div class="input-group">
                                        <input id="chat-msg" type="text" class="form-control">
                                        <span class="input-group-btn">
                                            <button class="btn btn-default" type="button">OK</button>
                                        </span>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>



                    <div class="tab-pane" id="attacks" style="overflow-x: hidden; overflow-y: auto;">
                        <div class="row">
                            <div class="col-xs-12">
                                <table id="event-attack-table" class="table table-condensed">
                                    <thead>
                                        <tr>
                                            <th>Hormigas</th>
                                            <th>Emisor</th>
                                            <th>Coordenadas</th>
                                            <th>Receptor</th>
                                            <th>Coordenadas</th>
                                            <th>Recursos</th>
                                            <th>Tiempo</th>
                                        </tr>
                                    </thead>
                                    <tbody id="events-attacks-lines" data-bind="foreach: events_attacks">
                                        <tr data-bind="if:type_movement == 'attack_start'" class="active">
                                            <td data-bind="text: num_ants"></td>
                                            <td data-bind="text: player_origin_name"></td>
                                            <td data-bind="text: base_origin_name"></td>
                                            <td data-bind="text: player_finish_name"></td>
                                            <td data-bind="text: base_finish_name"></td>
                                            <td data-bind="text: resources"></td>
                                            <td data-bind="attr:{id: sel_event_id}"></td>
                                        </tr>
                                        <tr data-bind="if:type_movement == 'attack_receive'" class="danger">
                                            <td data-bind="text: num_ants"></td>
                                            <td data-bind="text: player_origin_name"></td>
                                            <td data-bind="text: base_origin_name"></td>
                                            <td data-bind="text: player_finish_name"></td>
                                            <td data-bind="text: base_finish_name"></td>
                                            <td data-bind="text: resources"></td>
                                            <td data-bind="attr:{id: sel_event_id}"></td>
                                        </tr>
                                        <tr data-bind="if:type_movement == 'attack_back'" class="success">
                                            <td data-bind="text: num_ants"></td>
                                            <td data-bind="text: player_finish_name"></td>
                                            <td data-bind="text: base_finish_name"></td>
                                            <td data-bind="text: player_origin_name"></td>
                                            <td data-bind="text: base_origin_name"></td>
                                            <td data-bind="text: resources"></td>
                                            <td data-bind="attr:{id: sel_event_id}"></td>
                                        </tr>
                                    </tbody>
                                    <tbody id="events-upholds-lines" data-bind="foreach: events_upholds">
                                        <tr data-bind="if:type_movement == 'uphold_start'" class="active">
                                            <td data-bind="text: num_ants"></td>
                                            <td data-bind="text: player_origin_name"></td>
                                            <td data-bind="text: base_origin_name"></td>
                                            <td data-bind="text: player_finish_name"></td>
                                            <td data-bind="text: base_finish_name"></td>
                                            <td data-bind="text: resources"></td>
                                            <td data-bind="attr:{id: sel_event_id}"></td>
                                        </tr>
                                        <tr data-bind="if:type_movement == 'uphold_receive'" class="success">
                                            <td data-bind="text: num_ants"></td>
                                            <td data-bind="text: player_origin_name"></td>
                                            <td data-bind="text: base_origin_name"></td>
                                            <td data-bind="text: player_finish_name"></td>
                                            <td data-bind="text: base_finish_name"></td>
                                            <td data-bind="text: resources"></td>
                                            <td data-bind="attr:{id: sel_event_id}"></td>
                                        </tr>
                                        <tr data-bind="if:type_movement == 'uphold_back'" class="success">
                                            <td data-bind="text: num_ants"></td>
                                            <td data-bind="text: player_finish_name"></td>
                                            <td data-bind="text: base_finish_name"></td>
                                            <td data-bind="text: player_origin_name"></td>
                                            <td data-bind="text: base_origin_name"></td>
                                            <td data-bind="text: resources"></td>
                                            <td data-bind="attr:{id: sel_event_id}"></td>
                                        </tr>
                                    </tbody>

                                    <tbody id="events-lines" data-bind="foreach: events_resources">
                                        <tr data-bind="if:type_movement == 'resource_start'" class="active">
                                            <td data-bind="text: num_workers"></td>
                                            <td data-bind="text: player_origin_name"></td>
                                            <td data-bind="text: base_origin_name"></td>
                                            <td data-bind="text: player_finish_name"></td>
                                            <td data-bind="text: base_finish_name"></td>
                                            <td data-bind="text: resources"></td>
                                            <td data-bind="attr:{id: sel_event_id}"></td>
                                        </tr>
                                        <tr data-bind="if:type_movement == 'resource_receive'" class="success">
                                            <td data-bind="text: num_workers"></td>
                                            <td data-bind="text: player_origin_name"></td>
                                            <td data-bind="text: base_origin_name"></td>
                                            <td data-bind="text: player_finish_name"></td>
                                            <td data-bind="text: base_finish_name"></td>
                                            <td data-bind="text: resources"></td>
                                            <td data-bind="attr:{id: sel_event_id}"></td>
                                        </tr>
                                        <tr data-bind="if:type_movement == 'resource_back'" class="success">
                                            <td data-bind="text: num_workers"></td>
                                            <td data-bind="text: player_finish_name"></td>
                                            <td data-bind="text: base_finish_name"></td>
                                            <td data-bind="text: player_origin_name"></td>
                                            <td data-bind="text: base_origin_name"></td>
                                            <td data-bind="text: resources"></td>
                                            <td data-bind="attr:{id: sel_event_id}"></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>





                    <div class="tab-pane" id="reports" style="">
                        <div class="panel-group" id="report_accordion">
                            <div class="panel panel-default" data-bind="foreach: battle_reports">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#report_accordion" data-bind="attr:{href:report_id_html}">
                                        <div data-bind="text: issue"></div>
                                        </a>
                                    </h4>
                                    <div data-bind="attr:{id: report_id}" class="panel-collapse collapse">
                                        <div class="panel-body">

                                            <div style="margin-top:20px"></div>

                                            <div class="row">
                                                <div class="col-xs-6">
                                                    <strong>Comienzo de la partida</strong>
                                                </div>
                                                <div class="col-xs-6">
                                                    <div data-bind="text: date_start_game"></div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-xs-6">
                                                    <strong>Hora de llegada</strong>
                                                </div>
                                                <div class="col-xs-6">
                                                    <div data-bind="text: date_battle_report"></div>
                                                </div>
                                            </div>

                                            <div style="margin-top:20px"></div>

                                            <div class="row">
                                                <div class="col-xs-6">
                                                    <div class="row">
                                                        <div class="col-xs-6">
                                                            <strong>Atacante</strong>
                                                        </div>
                                                        <div class="col-xs-6">
                                                            <div data-bind="text: player_start_name"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-xs-6">
                                                    <div class="row">
                                                        <div class="col-xs-6">
                                                            <strong>Defensor</strong>
                                                        </div>
                                                        <div class="col-xs-6">
                                                            <div data-bind="text: player_finish_name"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div style="margin-top:20px"></div>

                                            <div class="row">
                                                <div class="col-xs-6">
                                                    <div class="row">
                                                        <div class="col-xs-3"><strong>Unidad</strong></div>
                                                        <div class="col-xs-3"><strong>Total</strong></div>
                                                        <div class="col-xs-3" style="background-color: #f2dede"><strong>Pérdidas</strong></div>
                                                        <div class="col-xs-3" style="background-color: #dff0d8"><strong>Restantes</strong></div>
                                                    </div>

                                                    <div class="row">
                                                        <div class="col-xs-3">
                                                            <div data-bind="foreach: ants_icons" class="row">
                                                                <div><img data-bind="attr: {src: $data}"></img></div>
                                                            </div>
                                                        </div>
                                                        
                                                        <div class="col-xs-3" style="">
                                                            <div data-bind="foreach: ants_attack_start" class="row">
                                                                <div data-bind="text: $data"></div>
                                                            </div>
                                                        </div>
                                                        <div class="col-xs-3" style="background-color: #f2dede">
                                                            <div data-bind="foreach: ants_attack_deads" class="row">
                                                                <div data-bind="text: $data"></div>
                                                            </div>
                                                        </div>
                                                        <div class="col-xs-3" style="background-color: #dff0d8">
                                                            <div data-bind="foreach: ants_attack_finish" class="row">
                                                                <div data-bind="text: $data"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-xs-6">
                                                    <div class="row">
                                                        <div class="col-xs-3"><strong>Unidad</strong></div>
                                                        <div class="col-xs-3"><strong>Total</strong></div>
                                                        <div class="col-xs-3" style="background-color: #f2dede"><strong>Pérdidas</strong></div>
                                                        <div class="col-xs-3" style="background-color: #dff0d8"><strong>Restantes</strong></div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-xs-3">
                                                            <div data-bind="foreach: ants_icons" class="row">
                                                                <div><img data-bind="attr: {src: $data}"></img></div>
                                                            </div>
                                                        </div>
                                                        <div class="col-xs-3">
                                                            <div data-bind="foreach: ants_defend_start" class="row">
                                                                <div data-bind="text: $data"></div>
                                                            </div>
                                                        </div>
                                                        <div class="col-xs-3" style="background-color: #f2dede">
                                                            <div data-bind="foreach: ants_defend_deads" class="row">
                                                                <div data-bind="text: $data"></div>
                                                            </div>
                                                        </div>
                                                        <div class="col-xs-3" style="background-color: #dff0d8">
                                                            <div data-bind="foreach: ants_defend_finish" class="row">
                                                                <div data-bind="text: $data"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div style="margin-top:20px"></div>

                                            <div class="row">
                                                <div class="col-xs-6">
                                                    <strong>Información</strong>
                                                </div>
                                                <div class="col-xs-6">
                                                    <div data-bind="text: info"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>








                            <div class="panel panel-default" data-bind="foreach: uphold_reports">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#report_accordion" data-bind="attr:{href:report_id_html}">
                                        <div data-bind="text: issue"></div>
                                        </a>
                                    </h4>
                                    <div data-bind="attr:{id: report_id}" class="panel-collapse collapse">
                                        <div class="panel-body">

                                            <div style="margin-top:20px"></div>

                                            <div class="row">
                                                <div class="col-xs-6">
                                                    <strong>Comienzo de la partida</strong>
                                                </div>
                                                <div class="col-xs-6">
                                                    <div data-bind="text: date_start_game"></div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-xs-6">
                                                    <strong>Hora de llegada</strong>
                                                </div>
                                                <div class="col-xs-6">
                                                    <div data-bind="text: date_battle_report"></div>
                                                </div>
                                            </div>

                                            <div style="margin-top:20px"></div>

                                            <div class="row">
                                                <div class="col-xs-6">
                                                    <div class="row">
                                                        <div class="col-xs-6">
                                                            <strong>Emisor</strong>
                                                        </div>
                                                        <div class="col-xs-6">
                                                            <div data-bind="text: player_start_name"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-xs-6">
                                                    <div class="row">
                                                        <div class="col-xs-6">
                                                            <strong>Receptor</strong>
                                                        </div>
                                                        <div class="col-xs-6">
                                                            <div data-bind="text: player_finish_name"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div style="margin-top:20px"></div>

                                            <div class="row">
                                                <div class="col-xs-6">
                                                    <div class="row">
                                                        <div class="col-xs-4"><strong>Unidad</strong></div>
                                                        <div class="col-xs-4"><strong>Enviadas</strong></div>
                                                        <div class="col-xs-4"><strong>Apoyadas</strong></div>
                                                    </div>

                                                    <div class="row">
                                                        <div class="col-xs-4">
                                                            <div data-bind="foreach: ants_icons" class="row">
                                                                <div><img data-bind="attr: {src: $data}"></img></div>
                                                            </div>
                                                        </div>
                                                        <div class="col-xs-4" style="">
                                                            <div data-bind="foreach: ants_uphold_init" class="row">
                                                                <div data-bind="text: $data"></div>
                                                            </div>
                                                        </div>
                                                        <div class="col-xs-4" style="">
                                                            <div data-bind="foreach: ants_uphold_finish" class="row">
                                                                <div data-bind="text: $data"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-xs-6">
                                                    <div class="row">
                                                        <div class="col-xs-4"><strong>Unidad</strong></div>
                                                        <div class="col-xs-4"><strong>Disponibles</strong></div>
                                                        <div class="col-xs-4"><strong>Apoyadas</strong></div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-xs-4">
                                                            <div data-bind="foreach: ants_icons" class="row">
                                                                <div><img data-bind="attr: {src: $data}"></img></div>
                                                            </div>
                                                        </div>
                                                        <div class="col-xs-4">
                                                            <div data-bind="foreach: ants_uphold_init" class="row">
                                                                +sdaf <div data-bind="text: $data"></div>
                                                            </div>
                                                        </div>
                                                        <div class="col-xs-4">
                                                            <div data-bind="foreach: ants_uphold_finish" class="row">
                                                                + <div data-bind="text: $data"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div style="margin-top:20px"></div>

                                            <div class="row">
                                                <div class="col-xs-6">
                                                    <strong>Información</strong>
                                                </div>
                                                <div class="col-xs-6">
                                                    <div data-bind="text: info"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>






                            <div class="panel panel-default" data-bind="foreach: movement_reports">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#report_accordion" data-bind="attr:{href:report_id_html}">
                                        <div data-bind="text: issue"></div>
                                        </a>
                                    </h4>
                                    <div data-bind="attr:{id: report_id}" class="panel-collapse collapse">
                                        <div class="panel-body">

                                            <div style="margin-top:20px"></div>

                                            <div class="row">
                                                <div class="col-xs-6">
                                                    <strong>Comienzo de la partida</strong>
                                                </div>
                                                <div class="col-xs-6">
                                                    <div data-bind="text: date_start_game"></div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-xs-6">
                                                    <strong>Hora de llegada</strong>
                                                </div>
                                                <div class="col-xs-6">
                                                    <div data-bind="text: date_battle_report"></div>
                                                </div>
                                            </div>
                                            <div style="margin-top:20px"></div>
                                            <div class="row">
                                                <div class="col-xs-6">
                                                    <div class="row">
                                                        <div class="col-xs-6">
                                                            <strong>Emisor</strong>
                                                        </div>
                                                        <div class="col-xs-6">
                                                            <div data-bind="text: player_start_name"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-xs-6">
                                                    <div class="row">
                                                        <div class="col-xs-6">
                                                            <strong>Receptor</strong>
                                                        </div>
                                                        <div class="col-xs-6">
                                                            <div data-bind="text: player_finish_name"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div style="margin-top:20px"></div>
                                            <div class="row">
                                                <div class="col-xs-6">
                                                    <strong>Información</strong>
                                                </div>
                                                <div class="col-xs-6">
                                                    <div data-bind="text: info"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div> <!-- END MOVEMENT REPORTS -->



                        </div>
                    </div>
                </div>
            </div> <!-- END ACTIONS -->
        </div> <!-- END PAGE RIGHT -->
    </div>
</div>


<br />
<br />

<div class="jumbotron" id="container_login">
    <div class="container">
        <form id="set-nickname" class="wrap">
            <div class="row">
                <div class="col-xs-6">
                    <strong>Nombre</strong>
                </div>
                <div class="col-xs-6">
                    <input type="text" id="nick" class="form-control">
                </div>
            </div>
            <div style="margin-top: 20px;">
            <div class="row">
                <div class="col-xs-6">
                    <strong>Rol</strong>
                </div>
                <div class="col-xs-6">
                    <select id="role_selection" class="form-control" style="cursor: pointer;">
                        <option value="A">Atacante</option>
                        <option value="D">Defensivo</option>
                        <option value="S">Veloz</option>
                        <option value="P">Productivo</option>
                    </select>
                    <p id="login_a_text_info" class="text_info">
                        Bonus del 10% extra de fuerza en tus ataques
                    </p>
                    <p id="login_d_text_info" class="text_info" style="display:none;">
                        Bonus del 10% extra de fuerza al defender
                    </p>
                    <p id="login_s_text_info" class="text_info" style="display:none;">
                        Bonus del 10% extra en la velocidad de todos los movimientos de tus hormigas (ataques, apoyos, envíos de recursos)
                    </p>
                    <p id="login_p_text_info" class="text_info" style="display:none;">
                        Bonus del 10% extra en la producción de recursos, en todos tus hormigueros
                    </p>                    
                </div>
            </div>
            <div style="margin-top: 20px;">
            <div class="row">
                <center>
                    <button class="btn btn-default" type="submit">
                        Jugar
                    </button>
                </center>
            </div>
        </form>
    </div>
</div>
<!--
<div id="chat">

    <div id="nickname">
        <form id="set-nickname" class="wrap">



            <div class="row">
                <div class="col-xs-6">
                    <strong>Nombre</strong>
                </div>
                <div class="col-xs-6">
                    <input type="text" id="nick" class="form-control">
                </div>
            </div>

            <p id="nickname-err">Nickname already in use</p>

            <div class="row">
                <div class="col-xs-6">
                    <strong>Rol</strong>
                </div>
                <div class="col-xs-6">
                    <select id="role_selection" class="form-control" style="cursor: pointer;">
                        <option value="A">Atacante</option>
                        <option value="D">Defensivo</option>
                        <option value="S">Veloz</option>
                        <option value="P">Productivo</option>
                    </select>
                </div>
            </div>
            <button class="btn btn-default" type="submit">
                Jugar
            </button>

        </form>
    </div>

    <div id="connecting">
        <div class="wrap">Connecting to socket.io server</div>
    </div>

    <div id="messages">
        <div id="nicknames"><span>Online:</span></div>
        <div id="lines"></div>
    </div>

    <form id="send-message">
        <input id="message">
        <button>Send</button>
    </form>
</div>

-->

{% endblock %}

